// 组合式api封装的通用的逻辑函数

// 参数 逻辑 返回值
// 参数: 没有
// 返回值: { y: y}
// 核心逻辑: 基于滚动事件得到距离顶部的像素值 然后return出去

import { onUnmounted, ref, computed } from 'vue'

// 1. vueUse插件 可复用的逻辑函数集合 内部封装就是类似的小函数
// 2. 可复用的逻辑 [随着滚动行为的发生产出一个距离顶部的y / 布尔开关数据的逻辑 ....]
// 一个或者多个响应式的数据 + 操作当前数据的方法 [纯js的概念]

// 作业1:
// const { value, setValue } = useToggle()
// setValue(true) -> value变成true
// setValue(false) -> value变成false

// 作业2：
// 实现一个filter函数
// selfFilter(arr,(item)=>{ return item > 2})

/**
  核心的倒计时逻辑：每隔1s --
  vueUse -> 每隔1s让我们做一件自己的事儿
 */

import { useIntervalFn } from '@vueuse/core'
import dayjs from 'dayjs'
export function useWindowScroll () {
  const y = ref(0)
  const scrollHanlder = () => {
    // 拿到距离顶部的像素值 交给y
    const scrollTop = document.documentElement.scrollTop
    // 滚动的距离是多少 响应式的数据y存储的就是多少
    y.value = scrollTop
  }
  // 写逻辑
  window.addEventListener('scroll', scrollHanlder)
  // 组件卸载时事件的解绑
  onUnmounted(() => {
    // 事件的解绑
    window.removeEventListener('scroll', scrollHanlder)
  })
  return {
    y
  }
}
export function useCountDown () {
  const time = ref(0)
  const formatTime = computed(() => {
    return dayjs.unix(time.value).format('mm分ss秒')
  })
  const { pause, resume } = useIntervalFn(() => {
    console.log('我们自己的函数还在执行')
    /* your function */
    if (time.value === 0) {
      return pause()
    }
    time.value--
  }, 1000)
  // 开始倒计时
  const start = (currentTime) => {
    time.value = currentTime
    resume()
  }
  // 停止倒计时
  const stop = () => {
    pause()
  }
  return {
    time,
    start,
    stop,
    formatTime
  }
}
